<template>
	<view>
		<view style="margin: 0 20upx;color: #ccc;">
			您将要充值的金额为 <text style="color: #FF5555;">{{need_money}}</text> 元,请选择支付方式并上传支付凭证
		</view>
		
		<view class="foot">
			<view class="uni-form-item uni-column">
				<view class="get_way">充值方式</view>
			</view>
			<view class="getit"  @click="changePayType(1)">
				<image src="../../../../static/weixindenglu_1.png" mode="" class="img"></image>
				<text class="getit_card">使用微信充值</text>
				<label class="radio">
					<radio value="" color="#fa436a" :checked='payType == 1' />
					</radio>
				</label>
			</view>
			<view :style="{ display: boolean_wx }">
				<view style="height: 40upx;line-height: 40upx;margin-left: 20upx;margin-top: 10upx;">请扫描微信收款码付款并提交付款凭证</view>
				<!-- <view style="display: inline-block;width: 150upx;height: 150upx;border-radius: 10upx;border: 2upx solid #ccc;margin-left: 20upx;overflow: hidden;margin-top: 20upx;text-align: center;font-size: 55upx;line-height: 145upx;" @click.stop.prevent="chooseImage" v-if="!res.wechat">
					+
				</view> -->
				<view v-if="imagess[0]" style="display: inline-block;width: 150upx;height: 150upx;border-radius: 10upx;border: 2upx solid #ccc;margin-left: 20upx;overflow: hidden;margin-top: 20upx;">
					<image :src="imagess[0]" mode="" style="width: 150upx;height: 150upx;" @click="preview_img(imagess[0],1)"></image>
				</view>
			</view>
			<view class="getit"  @click="changePayType(2)">
				<image src="../../../../static/zfb.png" mode="" class="img"></image>
				<text class="getit_card">使用支付宝充值</text>
				<label class="radio">
					<radio value="" color="#fa436a" :checked='payType == 2' />
					</radio>
				</label>
			</view>
			<view :style="{ display: boolean_zfb }">
				<view style="height: 40upx;line-height: 40upx;margin-left: 20upx;margin-top: 10upx;">请扫描支付宝收款码付款并提付款凭证</view>
				<!-- <view style="display: inline-block;width: 150upx;height: 150upx;border-radius: 10upx;border: 2upx solid #ccc;margin-left: 20upx;overflow: hidden;margin-top: 20upx;text-align: center;font-size: 55upx;line-height: 145upx;" @click.stop.prevent="select_img" v-if="!res.alipay">
					+
				</view> -->
				<view v-if="imagesss[0]" style="display: inline-block;width: 150upx;height: 150upx;border-radius: 10upx;border: 2upx solid #ccc;margin-left: 20upx;overflow: hidden;margin-top: 20upx;">
					<image :src="imagesss[0]" mode="" style="width: 150upx;height: 150upx;" @click="preview_img(imagesss[0],1)"></image>
				</view>
			</view>
			<view class="getit"  @click="changePayType(3)">
				<image src="../../../../static/yue_1.png" mode="" class="img"></image>
				<text class="getit_card">使用银行卡充值</text>
				<label class="radio">
					<radio value="" color="#fa436a" :checked='payType == 3' />
					</radio>
				</label>
			</view>
			<view class="show" :style="{display:boolean}">
				<view class="same">
					<view class="name">姓名</view>
					<input class="uni-input uni-input_cell" type="text" placeholder="请输入姓名" v-model="realname"/>
				</view>
				<view class="same">
					<view class="name">银行名称</view>
					<input class="uni-input uni-input_cell" type="text" placeholder="请输入银行" v-model="bankname" />
				</view>
				<view class="same">
					<view class="name">开户支行</view>
					<input class="uni-input uni-input_cell" type="text" placeholder="请输入开户支行" v-model="bankbranch" />
				</view>
				<view class="same">
					<view class="name">银行卡号</view>
					<input class="uni-input uni-input_cell" type="number" placeholder="请输入银行卡号" v-model="bankcard" />
				</view>
				<view class="same">
					<view class="name">确认卡号</view>
					<input class="uni-input uni-input_cell" type="number" placeholder="请确认卡号" v-model="bankcard1" />
				</view>
				
			</view>
			
			<view style="height: 80upx;line-height: 80upx;margin-left: 30upx;">
				上传支付凭证
			</view>
			
			
			<view style="display: inline-block;width: 150upx;height: 150upx;border-radius: 10upx;border: 2upx solid #ccc;margin-left: 20upx;overflow: hidden;margin-top: 20upx;text-align: center;font-size: 55upx;line-height: 145upx;" @click.stop.prevent="select_img" v-if="!imagessss[0]">
				+
			</view>
			<view v-if="imagessss[0]" style="display: inline-block;width: 150upx;height: 150upx;border-radius: 10upx;border: 2upx solid #ccc;margin-left: 20upx;overflow: hidden;margin-top: 20upx;">
				<image :src="imagessss[0]" mode="" style="width: 150upx;height: 150upx;"></image>
			</view>
			
			
			<button class="next" @click="submit">申请充值</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				res:{},
				openid:'',
				merchid:'',
				merchname: '',
				num:'',
				money:'',
				active:"active",
				checked:'checked',
				boolean: 'none',
				boolean_wx: 'none',
				boolean_zfb: 'none',
				bankout: 'none',
				arrs:[],
				// commission_ok:'',
				// 死的？	
				type:3,
				realname:'',
				bankname:'',
				bankbranch:'',
				bankbranch2:'',
				bankbranch3:'',
				bankcard:'',
				bankcard1:'',
				credit:'',
				multiple:'',
				withdrawcharge:'',
				withdrawmoney:'',
				// 地址
				accountarea:'-请选择地区-',
				cityPickerValueDefault: [0, 0, 0],
				pickerValueDefault: [0],
				pickerValueArray:[],
				// mulLinkageTwoPicker: cityData,
				// province:province,
				// city:city,
				// area:area,
				// asd:asd,
				themeColor: '#007AFF',
				pickerText: '',
				mode:'',
				deepLength:1,
				datavalue:'',
				payType: '', // 支付类型
				imagess: [], // 数组类型图片 wx
				imgurl:'', // 字符串类型图片 wx
				imagesss: [], // 数组类型图片 zfb
				imgurls:'', // 字符串类型图片 zfb,
				id:'',
				need_money:'',
				imagessss:[],
				voucher: '',
			};
		},
		onLoad:function(e){
			this.merchid = e.merchid
			this.id = e.id
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../../login/login'
					});
				}
			});
		},
		methods:{
			setAjax(){
				uni.request({
					url: 'https://app.t9y9y9.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=member.merch_credit2_recharge.detail&app=1',
					method: 'POST',
					data:{
						'openid': this.openid,
						'id': this.id
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						this.res = res.data
						this.need_money = res.data.rc.money
						console.log(this.res)
						this.credit = res.data.x_money
						this.withdrawcharge = res.data.withdrawcharge
						this.withdrawmoney = res.data.withdrawmoney
						
						if (res.data.merch.wechatimg != '' && res.data.merch.wechatimg != null) {
							this.imagess[0] = res.data.merch.wechatimg
						}
						if (res.data.merch.alipayimg != '' && res.data.merch.alipayimg != null) {
							this.imagesss[0] = res.data.merch.alipayimg
						}
						if (res.data.merch.bankcard != '' && res.data.merch.bankcard != null) {
							this.bankcard = res.data.merch.bankcard
							this.bankcard1 = res.data.merch.bankcard
						}
						if (res.data.merch.bankname != '' && res.data.merch.bankname != null) {
							this.bankname = res.data.merch.bankname
						}
						if (res.data.merch.multiple != '' && res.data.merch.multiple != null) {
							this.multiple = res.data.merch.multiple
						}
						if (res.data.merch.realname != '' && res.data.merch.realname != null) {
							this.realname = res.data.merch.realname
						}
						if (res.data.merch.accountarea != '' && res.data.merch.accountarea != null) {
							this.accountarea = res.data.merch.accountarea
						}
						if (res.data.merch.zhihang != '' && res.data.merch.zhihang != null) {
							this.bankbranch = res.data.merch.zhihang
						}
						if (res.data.merch.bankbranch2 != '' && res.data.merch.bankbranch2 != null) {
							this.bankbranch2 = res.data.merch.bankbranch2
						}
						if (res.data.merch.bankbranch3 != '' && res.data.merch.bankbranch3 != null) {
							this.bankbranch3 = res.data.merch.bankbranch3
						}
						this.withdrawcharge = res.data.merch.withdrawcharge
						// for( var i=0; i<res.data.merch.banklist.length; i++) {
						// 	this.arrs[i] = res.data.merch.banklist[i].bankname
						// }
					},
					fail: () => {},
					complete: () => {}
				});
				uni.hideLoading()
			},
			preview_img( img, index) {
				uni.previewImage({
					current: index,
					urls: [img],
					longPressActions: {
						success: function(data) {},
						fail: function(err) {}
					},
				})
			},
			select_img(){
				var _this = this
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
							let file = res.tempFilePaths
							var images = []
							var img = ''
							for(var i = 0; i<res.tempFilePaths.length; i++) {
								uni.uploadFile({
									url: 'https://app.t9y9y9.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
									//仅为示例，非真实的接口地址
									filePath: file[i],
									name: 'file',
									formData: {
										'user': 'test'
									},
									success: (res) => {
										_this.res.alipay = true
										// console.log(res)
										images.push(JSON.parse(res.data).url)
										_this.imagessss = images
										// _this.avatar = _this.imagess[0]
										
										img = img + JSON.parse(res.data).url + ';'
										_this.voucher = img
									}
								});
							}
				    }
				});
			},
			submit () {
				uni.request({
					url: 'https://app.t9y9y9.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=member.merch_credit2_recharge.detail_edit&app=1',
					method: 'POST',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					data:{
						'openid': this.openid,
						'id': this.id,
						'applytype': this.payType,
						'voucher': this.voucher
					},
					success: res => {
						uni.showToast({
							title: res.data.result.message,
							icon: 'none'
						})
						if (res.data.status == 1) {
							setTimeout(function() {
								uni.reLaunch({
									url: '../../../home/home'
								})
							}, 1000);
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			changePayType(type) {
				this.payType = type;
				if (type == 1) { // 微信
					this.boolean_wx = 'block'
					this.boolean_zfb = 'none'
					this.boolean = 'none'
				}
				if (type == 2) { // 支付宝
					this.boolean_zfb = 'block'
					this.boolean_wx = 'none'
					this.boolean = 'none'
				}
				if (type == 3) {
					this.boolean = 'block'
					this.boolean_wx = 'none'
					this.boolean_zfb = 'none'
				}
			},
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
		}
	}
</script>

<style>
	.foot {
		background-color: #FFFFFF;
		margin-top: 30upx;
	}
	.get_way {
		margin-left: 30upx;
		border-bottom: 2upx solid #eee;
	}
	.img {
		width: 50upx;
		height: 50upx;
		margin-left: 30upx;
		margin-top: 30upx;
	}
	.getit {
		position: relative;
		height: 100upx;
		border-bottom: 2upx solid #eee;
	}
	.getit_card {
		position: absolute;
		top: 30upx;
		left: 100upx;
	}
	.radio {
		position: absolute;
		top: 30upx;
		right: 25upx;
	}
	.show {
		background-color: #fff;
	}
	.same {
		height: 80upx;
		display: flex;
		margin: 20upx;
		padding-bottom: 20upx;
		border-bottom: 1upx solid #eee;
	}
	.name {
		flex: 1;
		padding-top: 16upx;
	}
	.uni-input_cell {
		flex: 3;
	}
	.bank {
		flex: 3;
		position: relative;
	}
	.bank_online {
		position: absolute;
		left: 10upx;
		top: 16upx;
	}
	.out_miss_father {
		position: absolute;
		top: 58upx;
		left: 10upx;
		z-index: 99999;
		width: 400upx;
		border: 1upx solid #ccc;
		background-color: #fff;
	}
	.next {
		margin: 20upx;
		border-radius: 15upx;
		background-color: #7C2548;
		color: #fff;
	}
	.list {
		height: 60upx;
		line-height: 60upx;
	}
</style>
